import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import {connect} from 'react-redux';
import {getTokenAndPower, _getUserInfo} from '../../api/index';
import {setToastMsg, setHomeData} from '../../actions/index';
let width = Dimensions.get('window').width;
let height = Dimensions.get('window').height;
class Announcement extends Component {
  static defaultProps = {
    todayDNANum: 1450000,
  };
  constructor(props) {
    super(props);
    this.state = {
      nickname: '',
    };
  }

  async getPowerAndTokens() {
    let result = await getTokenAndPower();
    let userInfo = await _getUserInfo();

    this.setState({
      token: result.data.token_count,
      power: result.data.power_count,
      nickname: userInfo.nickname,
    });
    this.props.setHomeData({
      token: result.data.token_count,
      power: result.data.power_count,
    });
  }
  componentDidMount() {
    this.getPowerAndTokens();
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View
          style={{
            backgroundColor: '#F3F7FA',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <View style={styles.boderStyle}>
            <Text
              style={{
                color: '#FFFFFF',
                fontSize: 12,
                justifyContent: 'center',
                textAlign: 'center',
                //fontFamily: 'MicrosoftYaHei-Bold',
                fontWeight: 'bold',
              }}>
              会员
            </Text>
            <Text
              style={{
                marginTop: (3.5 / 667) * height,
                color: '#ABC7FF',
                fontSize: 25,
                justifyContent: 'center',
                textAlign: 'center',
                //fontFamily: 'MicrosoftYaHei-Bold',
              }}>
              {this.state.nickname}
            </Text>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <View
                style={{
                  height: (0.5 / 667) * height,
                  borderWidth: (0.5 / 667) * height,
                  borderColor: '#3C8AF6',
                  marginTop: (20 / 667) * height,
                  width: (200 / 375) * width,
                }}
              />
            </View>
            <View
              style={{
                width: (300 / 375) * width,
                marginLeft: (19 / 375) * width,
                marginTop: (2 / 667) * height,
              }}>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginTop: (10 / 667) * height,
                }}>
                <View
                  style={{
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                    width: (338 / 375 / 2) * width,
                  }}>
                  <Text
                    style={{
                      marginTop: (4.5 / 667) * height,
                      textAlign: 'center',
                      color: '#ABC7FF',
                      fontSize: 14,
                      //fontFamily: 'MicrosoftYaHei-Bold',
                    }}>
                    碱基: {this.props.token.toFixed(2)}
                  </Text>
                </View>
                <View
                  style={{
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center',
                    width: (338 / 375 / 2) * width,
                  }}>
                  <Text
                    style={{
                      marginTop: (4.5 / 667) * height,
                      textAlign: 'center',
                      color: '#ABC7FF',
                      fontSize: 14,
                      //fontFamily: 'MicrosoftYaHei-Bold',
                    }}>
                    算力: {this.props.power}
                  </Text>
                </View>
              </View>
            </View>
          </View>
          <View style={styles.descContainerStyle}>
            <Text style={styles.descStyle}>
              基因是生命遗传信息的载体，基因数据作为生命的基础数据是每个人重要的数据资
              产，在营养饮食、运动健身、美容护肤、健康管理、药物研发、亲权确认、科学研究
              等方面具有重要应用。全基因组测序得到的是一种通用的基因数据，可用于各种基因
              检测服务，而这些数据被基因检测企业所把控，用户不能掌控自己的数据，在不同企
              业之间共享获得服务。另一方面，以生物制药企业、生物公司、科研机构等为代表的
              项目方对基因数据以及多维度的医疗健康数据有强烈的需求，却没有可信的数据源。
              在此情况下，HGBC（Human Genome Block
              Chain）项目通过引入区块链技术，把
              基因组数据完整确权给个人，让每个人切实拥有自己数据的所有权，同时，利用分布
              式存储和加密技术解决数据的隐私和安全问题。通过解构行业分工，形成以用户为核
              心，测序商、服务提供方、项目方参与的新生态。我们自己以及其它第三方基因检测
              公司可以在平台上开发出关于营养饮食、运动健身、美容护肤、健康管理、药物研
              发、亲权确认、科学研究等方面的各种应用。用户数据作为生态中的数字资产，在医
              疗健康、科学研究等领域流动，让个人获得数字资产收益的同时，加快人类在基因领
              域的探索，造福人类社会。
            </Text>
          </View>

          {/*<Ranking />*/}
          {/*<View style={{height: (5 / 667) * height}} />*/}
        </View>
      </ScrollView>
    );
  }
}

export default connect(
  state => ({token: state.home.token_count, power: state.home.power_count}),
  dispatch => ({
    setToastMsg: text => dispatch(setToastMsg(text)),
    setHomeData: data => dispatch(setHomeData(data)),
  }),
)(Announcement);

let styles = StyleSheet.create({
  container: {
    width: 375,
  },
  boderStyle: {
    marginTop: (21 / 667) * height,
    height: (168.5 / 667) * height,
    width: (338 / 375) * width,
    backgroundColor: '#256AF5',
    borderRadius: 6,
    justifyContent: 'center',
    alignItems: 'center',
  },
  rankingStyle: {
    marginTop: (21.5 / 667) * height,
    width: (338 / 375) * 375,
    // height: (height * (667 - 168.5)) / 667,
    backgroundColor: '#FFFFFF',
    borderRadius: 6,
  },
  descStyle: {
    marginLeft: (19 / 375) * 375,
    marginTop: (10 / 667) * height,
    width: (300 / 375) * 375,
    textAlign: 'center',
    color: '#333333',
    fontSize: 14,
    // fontFamily: 'MicrosoftYaHei-Bold',
    // fontWeight: 'bold',
  },
  descContainerStyle: {
    marginTop: (21.5 / 667) * height,
    width: (338 / 375) * 375,
    flexDirection: 'row',
    borderRadius: 6,
    backgroundColor: '#FFFFFF',
  },
});
